@tailwind base;
@tailwind components;
@tailwind utilities;

/* 清新友好风格基础样式 */
@layer components {
  .glass {
    @apply bg-white/80 backdrop-blur-md border border-emerald-200/50 rounded-xl;
  }
  
  .glass-card {
    @apply glass shadow-lg shadow-emerald-500/10 p-6;
  }
  
  .glass-button {
    @apply glass px-4 py-2 hover:bg-emerald-50 hover:border-emerald-300/60 transition-all duration-300 cursor-pointer;
  }
  
  .glass-input {
    @apply glass px-4 py-2 outline-none focus:border-emerald-400/60 transition-all duration-300;
  }
}

/* 动画定义 */
@layer utilities {
  /* 淡入动画 */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }
  
  /* 上滑动画 */
  .animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
  }
  
  /* 下滑动画 */
  .animate-slide-down {
    animation: slideDown 0.3s ease-out forwards;
  }
  
  /* 缩放淡入动画 */
  .animate-scale-in {
    animation: scaleIn 0.3s ease-out forwards;
  }
  
  /* 脉冲柔和动画 */
  .animate-pulse-soft {
    animation: pulseSoft 2s ease-in-out infinite;
  }
  
  /* 闪烁动画 - 绿色 */
  .animate-shimmer {
    animation: shimmer 2s linear infinite;
    background: linear-gradient(
      90deg,
      rgba(76, 175, 80, 0.1) 0%,
      rgba(76, 175, 80, 0.3) 50%,
      rgba(76, 175, 80, 0.1) 100%
    );
    background-size: 200% 100%;
  }
  
  /* 弹跳动画 */
  .animate-bounce-soft {
    animation: bounceSoft 0.6s ease-out;
  }
  
  /* 旋转动画 */
  .animate-spin-slow {
    animation: spin 3s linear infinite;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseSoft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes bounceSoft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 全局样式 - 清新友好配色 */
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #F0F2F5 0%, #E8F5E9 50%, #F0F2F5 100%);
  background-attachment: fixed;
  color: #333333;
}

#root {
  min-height: 100vh;
}

/* 滚动条美化 - 清新风格 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(76, 175, 80, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4CAF50 0%, #66BB6A 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66BB6A 0%, #81C784 100%);
}
